<!--1-9锥齿轮强度校核-->
<template>
    <div class="borde" style="width: 100%; height: 100%;font-size: 16px;display: flex;">
        <div class="body">
            <a-row class="all_row">
                <div class="top">
                    <div class="top_top">输入参数</div>
                    <div class="top_middle">
                        <div class="top_middle_top">载荷及应用条件</div>
                        <div class="top_middle_bottom">
                            <div class="top_middle_bottom_body">
                                <div class="top_middle_bottom_left">
                                    <div class="top_middle_bottom_left_body">
                                        <div class="top_middle_bottom_l_left">
                                            <div class="top_middle_bottom_l_left_body">
                                                <ul class="top_middle_bottom_l_left_list">
                                                    <li>设计载荷输入形式</li>
                                                    <li>运行工况</li>
                                                    <li></li><!-- 占位-->
                                                    <li> <label v-show="params_10.whether_rate_load==1">小齿轮额定形式 </label> </li>
                                                    <li> <label v-show="params_10.whether_rate_load==1&&params_10.whether_power==1">功率(kW) </label>
                                                        <label v-show="params_10.whether_rate_load==1&&params_10.whether_power==2">扭矩(Nmm) </label>
                                                    </li>
                                                    <li> <label v-show="params_10.whether_rate_load==1">设计寿命(hr)</label> </li>
                                                    <li> <label v-show="params_10.whether_rate_load==1">小齿轮额定转速(rpm)</label> </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="top_middle_bottom_l_right">
                                            <div class="top_middle_bottom_l_right_body">
                                                <ul class="top_middle_bottom_l_right_list">
                                                    <li>
                                                        <select style="width: 45%;height: 90%;border: 0.5px solid ;border-radius: 3px" v-model="params_10.whether_rate_load">
                                                            <option value="1">额定工况</option>
                                                            <option value="2">载荷谱</option>
                                                        </select>
                                                    </li>
                                                    <li>
                                                        <select style="width: 45%;height: 90%;border: 0.5px solid ;border-radius: 3px" v-model="params_10.operation_type">
                                                            <option value="1">单向运行</option>
                                                            <option value="2">双向运行</option>
                                                            <option value="3">惰轮</option>
                                                        </select>
                                                    </li>
                                                    <li >
                                                        <a-upload :showUploadList="false" :maxCount="1" :customRequest="customRequest" name="file">
                                                            <button style="width: 100%;height: 90%;border: 0.5px solid ;border-radius: 3px" v-show="params_10.whether_rate_load==2" >导入小轮载荷谱</button>
                                                        </a-upload>
                                                      <p v-show="params_10.whether_rate_load==2">注：载荷谱文件格式为.xls或.xlsx格式，其各列参数为右表所示(无需表头)</p>
                                                    </li>
                                                    <li>
                                                        <select style="width: 45%;height: 90%;border: 0.5px solid ;border-radius: 3px"
                                                                v-model="params_10.whether_power" v-show="params_10.whether_rate_load==1">
                                                            <option value="1">输入功率</option>
                                                            <option value="2">输入扭矩</option>
                                                        </select>
                                                    </li>
                                                    <li>
                                                        <input style="width: 45%;height: 90%;border: 0.5px solid ;border-radius: 3px;text-align: center"
                                                               v-model="params_10.spectrum_power" v-show="params_10.whether_rate_load==1&&params_10.whether_power==1"/>
                                                        <input style="width: 45%;height: 90%;border: 0.5px solid ;border-radius: 3px;text-align: center"
                                                               v-model="params_10.spectrum_torque" v-show="params_10.whether_rate_load==1&&params_10.whether_power==2"/>
                                                    </li>
                                                    <li>
                                                        <input style="width: 45%;height: 90%;border: 0.5px solid ;border-radius: 3px;text-align: center"
                                                               v-model="params_10.spectrum_time" v-show="params_10.whether_rate_load==1"/>
                                                    </li>
                                                    <li>
                                                        <input style="width: 45%;height: 90%;border: 0.5px solid ;border-radius: 3px;text-align: center"
                                                               v-model="params_10.spectrum_speed" v-show="params_10.whether_rate_load==1"/>

                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="top_middle_bottom_right">
                                    <div class="top_middle_bottom_r_top">
                                        <div class="top_middle_bottom_r_top_body">
                                            <div class="top_middle_bottom_r_t_left">
                                                <div class="top_middle_bottom_r_t_left_body">
                                                    <label class="top_middle_bottom_r_t_left_label"
                                                    style="position: absolute;left: 5%;width: 20%;">应用场合</label>
                                                    <select class="top_middle_bottom_r_t_left_select"
                                                            style="width: 40%;height: 45%;border: 0.5px solid ;border-radius: 3px;position: absolute;left: 25%;"
                                                            v-model="params_10.application">
                                                        <option value="1">一般应用</option>
                                                        <option value="2">特殊应用</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="top_middle_bottom_r_t_right">
                                                <div class="top_middle_bottom_r_t_right_body">
                                                    <label class="top_middle_bottom_r_t_right_label"
                                                           style="position: absolute;left: 0%;width: 20%;">使用系数</label>
                                                    <input class="top_middle_bottom_r_t_right_input" v-model="params_10.KA"
                                                     style="position: absolute;left: 20%;width: 40%;height: 45%;border: 0.5px solid ;border-radius: 3px;text-align: center"/>
                                                    <button class="top_middle_bottom_r_t_right_button" @click="showModal"
                                                    style="position: absolute;left: 62%;width: 10%;height: 45%">!</button>
                                                    <a-modal title="" :visible="visible" width="620px"
                                                             :confirm-loading="confirmLoading"
                                                             @ok="handleOk" @cancel="handleCancel">
                                                        <img :src="img_one" id="img1" >
                                                    </a-modal>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="top_middle_bottom_r_bottom">
                                        <div class="top_middle_bottom_r_bottom_body">
                                            <el-table v-show="params_10.whether_rate_load==2"
                                                    height="110" border  stripe
                                                    :data="dataSource"
                                                    :row-style="{height:'15px'}"
                                                      :cell-style="{padding:'0px'}"
                                                    :header-cell-style="{height:'10px',padding:'0px'}"
                                                    style="width: 60%;height: 100%;font-size: 10px;">
                                                <el-table-column
                                                        prop="0" label="序号" width="50" >
                                                </el-table-column>
                                                <el-table-column
                                                        prop="1" label="扭矩(Nmm)" width="90" h>
                                                </el-table-column>
                                                <el-table-column
                                                        prop="2" label="循环次数" width="90" >
                                                </el-table-column>
                                                <el-table-column
                                                        prop="3" label="转速(rpm)" >
                                                </el-table-column>
<!--                                                <el-table-column-->
<!--                                                        prop="b1" label="序号" width="50" >-->
<!--                                                </el-table-column>-->
<!--                                                <el-table-column-->
<!--                                                        prop="b2" label="扭矩(Nmm)" width="90" h>-->
<!--                                                </el-table-column>-->
<!--                                                <el-table-column-->
<!--                                                        prop="b3" label="循环次数" width="90" >-->
<!--                                                </el-table-column>-->
<!--                                                <el-table-column-->
<!--                                                        prop="b4" label="转速(rpm)" >-->
<!--                                                </el-table-column>-->
                                            </el-table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="top_bottom">
                        <div class="top_bottom_top" style="width:100%;height:6%;padding-left:1%;background-color: rgba(215,215,215,1);
">齿轮设计参数</div>
                        <div class="top_bottom_body">
                            <div class="top_bottom_left">
                                <div class="top_bottom_left_body">
                                    <div class="top_bottom_l_left">
                                        <div class="top_bottom_l_left_body">
                                            <ul class="top_bottom_l_left_list">
                                                <li></li>
                                                <li>大端端面模数(mm)</li>
                                                <li>齿数</li>
                                                <li>法向压力角(°)</li>
                                                <li>螺旋角(°)</li>
                                                <li>轴夹角(°)</li>
                                                <li>刀盘半径(mm)</li>
                                                <li>齿宽(mm)</li>
                                                <li>刀头圆角半径(mm)</li>
                                                <li>中点工作齿高系数</li>
                                                <li>小轮切向变位系数</li>
                                                <li>顶隙(mm)</li>
                                                <li>中点大齿轮顶高分配系数</li>
                                                <li>小轮侧隙分配比例</li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="top_bottom_l_right">
                                        <div class="top_bottom_l_right_body">
                                            <ul class="top_bottom_l_right_list">
                                                <li style="position: relative">
                                                    <div class="li1_left"
                                                         style="width:50%;height:100%;position: absolute;left:0;text-align: center">小轮</div>
                                                    <div class="li1_right"
                                                         style="width:50%;height:100%;position: absolute;right:0;text-align: center">大轮</div>
                                                </li>
                                                <li style="text-align: center">
                                                    <input v-model="params_10.met" style="width: 95%;height:90%;text-align:center;border: 0.5px solid ;border-radius: 3px;"/>
                                                </li>
                                                <li style="position: relative">
                                                    <div class="li3_input_left"
                                                         style="width:50%;height:100%;position: absolute;left:0;text-align: center">
                                                        <input v-model="params_10.n" style="width: 90%;height:90%;text-align:center;border: 0.5px solid ;border-radius: 3px;"/>
                                                    </div>
                                                    <div class="li3_input_right"
                                                         style="width:50%;height:100%;position: absolute;right:0;text-align: center">
                                                        <input v-model="params_10.N" style="width: 90%;height:90%;text-align:center;border: 0.5px solid ;border-radius: 3px;"/>
                                                    </div>
                                                </li>
                                                <li style="text-align: center">
                                                    <input v-model="params_10.alaph" style="width: 95%;height:90%;text-align:center;border: 0.5px solid ;border-radius: 3px;"/>
                                                </li>
                                                <li style="text-align: center">
                                                    <input v-model="params_10.phi" style="width: 95%;height:90%;text-align:center;border: 0.5px solid ;border-radius: 3px;"/>
                                                </li>
                                                <li style="text-align: center">
                                                    <input v-model="params_10.sigma" style="width: 95%;height:90%;text-align:center;border: 0.5px solid ;border-radius: 3px;"/>
                                                </li>
                                                <li style="text-align: center">
                                                    <input v-model="params_10.rc" style="width: 95%;height:90%;text-align:center;border: 0.5px solid ;border-radius: 3px;"/>
                                                </li>
                                                <li style="text-align: center">
                                                    <input v-model="params_10.F" style="width: 95%;height:90%;text-align:center;border: 0.5px solid ;border-radius: 3px;"/>
                                                </li>
                                                <li style="position: relative">
                                                    <div class="li4_input_left"
                                                         style="width:50%;height:100%;position: absolute;left:0;text-align: center">
                                                        <input v-model="params_10.rao1" style="width: 90%;height:90%;text-align:center;border: 0.5px solid ;border-radius: 3px;"/>
                                                    </div>
                                                    <div class="li4_input_right"
                                                         style="width:50%;height:100%;position: absolute;right:0;text-align: center">
                                                        <input v-model="params_10.rao2" style="width: 90%;height:90%;text-align:center;border: 0.5px solid ;border-radius: 3px;"/>
                                                    </div>
                                                </li>
                                                <li style="text-align: center">
                                                    <input v-model="params_10.k1" style="width: 95%;height:90%;text-align:center;border: 0.5px solid ;border-radius: 3px;"/>
                                                </li>
                                                <li style="position: relative">
                                                    <div class="li5_input_left"
                                                         style="width:50%;height:100%;position: absolute;left:0;text-align: center">
                                                        <input v-model="params_10.k3" style="width: 90%;height:90%;text-align:center;border: 0.5px solid ;border-radius: 3px;"/>
                                                    </div>
                                                    <div class="li5_input_right"
                                                         style="width:50%;height:100%;position: absolute;right:0;text-align: center">
                                                    </div>
                                                </li>
                                                <li style="text-align: center">
                                                    <input v-model="params_10.c" style="width: 95%;height:90%;text-align:center;border: 0.5px solid ;border-radius: 3px;"/>
                                                </li>
                                                <li style="position: relative">
                                                    <div class="li6_input_left"
                                                         style="width:50%;height:100%;position: absolute;left:0;text-align: center">
                                                    </div>
                                                    <div class="li6_input_right"
                                                         style="width:50%;height:100%;position: absolute;right:0;text-align: center">
                                                        <input v-model="params_10.c1" style="width: 90%;height:90%;text-align:center;border: 0.5px solid ;border-radius: 3px;"/>
                                                    </div>
                                                </li>
                                                <li style="position: relative">
                                                    <div class="li5_input_left"
                                                         style="width:50%;height:100%;position: absolute;left:0;text-align: center">
                                                        <input v-model="params_10.f_b" style="width: 90%;height:90%;text-align:center;border: 0.5px solid ;border-radius: 3px;"/>
                                                    </div>
                                                    <div class="li5_input_right"
                                                         style="width:50%;height:100%;position: absolute;right:0;text-align: center">
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="top_bottom_right">
                                <div class="top_bottom_right_body">
                                    <div class="top_bottom_right_left">
                                        <div class="top_bottom_right_left_body">
                                            <ul class="top_bottom_right_left_list">
                                                <li></li>
                                                <li>锥齿轮类型</li>
                                                <li>小轮轮工作齿面</li>
                                                <li>齿面是否修鼓</li>
                                                <li>齿轮精度等级</li>
                                                <li>齿轮材料等级</li>
                                                <li>齿轮安装类型</li>
                                                <li>可靠度要求</li>
                                                <li></li>
                                                <li></li>
                                                <li></li>
                                                <li></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="top_bottom_right_right">
                                        <div class="top_bottom_right_right_body">
                                            <ul class="top_bottom_right_right_list">
                                                <li></li>
                                                <li >
                                                    <select v-model="params_10.bevel_gear_type"
                                                            style="width: 40%;height: 90%;border: 0.5px solid ;border-radius: 3px;font-size:15px;padding-left:10px">
                                                        <option value="1">直齿或零度弧齿锥齿轮</option>
                                                        <option value="2">螺旋锥齿轮</option>
                                                        </select>
                                                </li>
                                                <li>
                                                    <select v-model="params_10.pinion_work_flank"
                                                            style="width: 40%;height: 90%;border: 0.5px solid ;border-radius: 3px;font-size:15px;padding-left:10px">
                                                        <option value="1">凹面</option>
                                                        <option value="2">凸面</option>
                                                    </select>
                                                </li>
                                                <li>
                                                    <select v-model="params_10.crowned"
                                                            style="width: 40%;height: 90%;border: 0.5px solid ;border-radius: 3px;font-size:15px;padding-left:10px">
                                                        <option value="1">是</option>
                                                        <option value="2">否</option>
                                                    </select>
                                                </li>
                                                <li>
                                                    <select v-model="params_10.quality_number"
                                                            style="width: 40%;height: 90%;border: 0.5px solid ;border-radius: 3px;font-size:15px;padding-left:10px">
                                                        <option value="1">3</option>  <option value="2">4</option>  <option value="3">5</option> <option value="4">6</option>
                                                        <option value="5">7</option> <option value="6">8</option> <option value="7">9</option> <option value="8">10</option>
                                                        <option value="9">11</option> <option value="10">12</option> <option value="11">13</option>
                                                    </select>
                                                </li>
                                                <li>
                                                    <select v-model="params_10.material_stage"
                                                            style="width: 40%;height: 90%;border: 0.5px solid ;border-radius: 3px;font-size:15px;padding-left:10px">
                                                        <option value="1">Grade1(ML)</option>
                                                        <option value="2">Grade2(MQ)</option>
                                                        <option value="3">Grade3(ME)</option>
                                                    </select>
                                                </li>
                                                <li>
                                                    <select v-model="params_10.mount_type"
                                                            style="width: 40%;height: 90%;border: 0.5px solid ;border-radius: 3px;font-size:15px;padding-left:10px">
                                                        <option value="1">两轮跨式安装</option>
                                                        <option value="2">一轮跨式安装</option>
                                                        <option value="3">两轮悬臂安装</option>
                                                    </select>
                                                </li>
                                                <li>
                                                    <select v-model="params_10.R_app"
                                                            style="width: 40%;height: 90%;border: 0.5px solid ;border-radius: 3px;font-size:15px;padding-left:10px">
                                                        <option value="1">失效概率小于万分之一</option>
                                                        <option value="2">失效概率小于千分之一</option>
                                                        <option value="3">失效概率小于百分之一</option>
                                                        <option value="3">失效概率小于十分之一</option>
                                                        <option value="3">失效概率小于二分之一</option>
                                                    </select>
                                                </li>
                                                <li></li>
                                                <li></li>
                                                <li></li>
                                                <li></li>

                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="middle">
                    <div class="middle_body" style="width:100%;height:100%;position:relative">
                        <button @click="calculate" style="width:10%;height:80%;position:absolute;right: 10%">计算</button>
                    </div>
                    </div>
                <div class="bottom">
                    <div class="bottom_top">输出结果</div>
                    <div class="bottom_bottom">
                        <div class="bottom_bottom_body">
                            <div class="bottom_bottom_left">
                                <div class="bottom_bottom_left_body">
                                    <div class="bottom_bottom_left_left">
                                        <div class="bottom_bottom_left_left_body">
                                            <ul class="bottom_bottom_left_left_list">
                                                <li></li>
                                                <li>弯曲安全系数</li>
                                                <li>接触安全系数</li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="bottom_bottom_left_right">
                                        <div class="bottom_bottom_left_right_body">
                                            <div class="bottom_bottom_left_right_list">
                                                <li style="position:relative">
                                                    <div class="bottom_list_li1_left"
                                                         style="width:50%;height:100%;position:absolute;left:0;text-align:center">小轮</div>
                                                    <div class="bottom_list_li1_right"
                                                         style="width:50%;height:100%;position:absolute;right:0;text-align:center">大轮</div>
                                                </li>
                                                <li style="position:relative">
                                                    <div class="bottom_list_li1_left"
                                                         style="width:50%;height:100%;position:absolute;left:0;text-align:center">{{ans.SF1}}</div>
                                                    <div class="bottom_list_li1_right"
                                                         style="width:50%;height:100%;position:absolute;right:0;text-align:center">{{ans.SF2}}</div>
                                                </li>
                                                <li style="position:relative">
                                                    <div class="bottom_list_li1_left"
                                                         style="width:50%;height:100%;position:absolute;left:0;text-align:center">{{ans.SH1}}</div>
                                                    <div class="bottom_list_li1_right"
                                                         style="width:50%;height:100%;position:absolute;right:0;text-align:center">{{ans.SH2}}</div>
                                                </li>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="bottom_bottom_right"></div>
                        </div>
                    </div>
                </div>
            </a-row>
        </div>

    </div>
</template>

<script>
    import img_one from '@/assets/image/image_10_1.jpg'
    import {damege, filetext, filedetele} from "@/api/file";
    import {filedelete, firedelete} from "../../../api/file";
    export default {
        created () {
            document.title = '锥齿轮强度校核'
            this.$store.state.file.key = 10
        },
        name: "bevel_gear_strength_safty_facor_Damege",
        data(){
            return{
                img_one,
                visible:false,
                visible1:false,
                confirmLoading:false,
                confirmLoading1:false,
                params_10:this.$store.state.file.dataList[10],
                form2:{
                    uuids:[]
                },
                // params_10:{
                //     whether_rate_load:1,
                //     operation_type:1,
                //     whether_power:1,
                //     spectrum_power:1000,
                //     spectrum_torque:1000,
                //     spectrum_time:175200,
                //     spectrum_speed:1000,
                //     application:2,
                //     KA:1.3,
                //     met:5,
                //     n:35,
                //     N:121,
                //     alaph:20,
                //     phi:10,
                //     sigma:90,
                //     rc:110,
                //     F:110,
                //     rao1:0,
                //     rao2:0,
                //     k1:2,
                //     k3:0,
                //     c:2,
                //     c1:0.5,
                //     f_b:0.5,
                //     bevel_gear_type:2,
                //     pinion_work_flank:1,
                //     crowned:1,
                //     quality_number:4,
                //     material_stage:2,
                //     mount_type:2,
                //     R_app:3,
                //     uuid:'',
                //     // spectrum:'',
                // },
                ans:{
                    SF1: "Text",
                    SF2: "Text",
                    SH1: "Text",
                    SH2: "Text"
                },
                dataSource:[],


            }
        },
        mounted(){
            //绑定页面退出事件
            window.onbeforeunload= (e)=>{
                e = e || window.event;
                if (e) {
                    e.returnValue = '关闭提示';
                }
                this.delete()//调用自己的方法
                // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
                return '关闭提示';
            };
        },
        methods:{
            customRequest(data){
                const formData = new FormData()
                formData.append('fileName',data.file)
                filetext(formData)
                    .then(res => {
                        console.log(res)
                        this.dataSource=res.data.filedata
                        this.params_10.uuid=res.data.uuid
                        this.form2.uuids.push(res.data.uuid);
                    })
                    .catch(err =>{
                        console.log(err)
                    })
            },
            showModal(){
                this.visible=true;
            },
            showModal1(){
                this.visible1=true;
            },
            handleOk(){
                this.confirmLoading=true;
                setTimeout(() => {
                        this.visible=false;
                        this.confirmLoading=false;
                    }

                );
            },
            handleCancel(){
                this.visible=false;
            },
            handleOk1(){
                this.confirmLoading1=true;
                setTimeout(() => {
                        this.visible1=false;
                        this.confirmLoading1=false;
                    }

                );
            },
            handleCancel1(){
                this.visible1=false;
            },
            calculate(){
               // console.log("this.$store.state.file.dataList[10].whether_rate_load",this.$store.state.file.dataList[10].whether_rate_load == 2)
                if(this.$store.state.file.dataList[10].whether_rate_load == 2 && this.$store.state.file.dataList[10].uuid == '' ){
                    alert("请导入载荷谱")
                }else {
                    //这个括号里面可以传参，一般就是传你this.params_10的内容
                    damege(this.$store.state.file.dataList[10])
                        .then(res => {//这里需要用箭头函数，如果不用箭头函数里面的this就不是外面那个this
                            console.log(res);
                            //你也可以不检验，这个状态码一般是检验后端数据有没有异常，res就是返回结果的整个大的对象
                            this.ans.SF1=res[2];
                            this.ans.SF2=res[0];
                            this.ans.SH1=res[6];
                            this.ans.SH2=res[4];
                        })
                        .catch(error => {
                            console.log(error);
                        });
                }
            },
            async delete(){
                this.form2.uuids=this.form2.uuids.toString();//将载荷谱文件数组转成字符串
                await filedelete(this.form2).then(res => {
                    console.log(res);
                })
            },
        }
    }
</script>

<style scoped>
    /*.el-table--small th,.el-table--small td{*/
    /*    padding: 2px 0;*/
    /*    padding-top: 2px;*/
    /*    padding-right: 0px;*/
    /*    padding-bottom: 2px;*/
    /*    padding-left: 0 px;*/
    /*}*/
    ul,ol,li{
        list-style: none;
    }
    .borde{
        font-size: 17.5px;
    }
    .body{
        width: 100%;
        height: 100%;
        /*background-color: rgba(213, 213, 213, 0.349019607843137);*/
    }
    .all_row{
        width: 100%;
        height: 100%;
    }
    .top{
    width: 100%;
    height: 80%;
}
    .middle{
        width: 100%;
        height: 5%;
    }
    .bottom{
        width: 100%;
        height: 15%;
    }
    .bottom_top{
        width: 100%;
        height: 20%;
        background-color: rgba(215,215,215,1);
    }
    .bottom_bottom{
        width: 100%;
        height: 80%;
    }
    .bottom_bottom_body{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .bottom_bottom_left{
        width: 65%;
        height: 100%;
        position: absolute;
        left: 0;
    }
    .bottom_bottom_left_body{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .bottom_bottom_left_left{
        width: 45%;
        height: 100%;
        position: absolute;
        left: 0;
    }
    .bottom_bottom_left_left_body{
        width: 100%;
        height: 100%;
        position: relative;

    }
    .bottom_bottom_left_left_list{
        width: 100%;
        height: 100%;
        position: absolute;
        right: 10%;
        text-align: right;
    }
    .bottom_bottom_left_left_list li{
        width: 100%;
        height: 33%;
    }
    .bottom_bottom_left_right{
        width: 55%;
        height: 100%;
        position: absolute;
        right: 0;
    }
    .bottom_bottom_left_right_body{
        width: 100%;
        height: 100%;

    }
    .bottom_bottom_left_right_list{
        width: 100%;
        height: 100%;
    }
    .bottom_bottom_left_right_list li{
        width: 100%;
        height: 33%;
    }
    .bottom_bottom_right{
        width: 35%;
        height: 100%;
        position: absolute;
        right: 0;
    }
    .top_top{
        width: 100%;
        height: 5%;
        background-color: rgba(215,215,215,1);
    }
    .top_middle{
        width: 100%;
        height: 35%;
        border: 1px solid #EBEBEB;
        box-shadow: 0px 2px 8px rgba(213, 213, 213, 0.349019607843137);
    }
    .top_middle_top{
        width: 100%;
        height: 10%;
        padding-left: 1%;
        background-color: rgba(215,215,215,1);
    }
    .top_middle_bottom{
        width: 100%;
        height: 90%;

    }
    .top_middle_bottom_body{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .top_middle_bottom_left{
        width: 50%;
        height: 100%;
        position: absolute;
        left: 0;
    }
    .top_middle_bottom_left_body{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .top_middle_bottom_l_left{
        width: 55%;
        height: 100%;
        position: absolute;
        left: 0;
    }
    .top_middle_bottom_l_left_body{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .top_middle_bottom_l_left_list{
        width: 100%;
        height: 100%;
        text-align: right;
        position: absolute;
        right: 5%;
    }
    .top_middle_bottom_l_left_list li{
        width: 100%;
        height: 14.3%;
    }
    .top_middle_bottom_l_right{
        width: 45%;
        height: 100%;
        position: absolute;
        right: 0;
    }
    .top_middle_bottom_l_right_body{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .top_middle_bottom_l_right_list{
        width: 100%;
        height: 100%;
        text-align: left;
        position: absolute;
        left: 5%;
    }
    .top_middle_bottom_l_right_list li{
        width: 100%;
        height: 14.3%;
    }
    .top_middle_bottom_right{
        width: 50%;
        height: 100%;
        position: absolute;
        right: 0;
    }
    .top_middle_bottom_r_top{
        width: 100%;
        height: 30%;
    }
    .top_middle_bottom_r_top_body{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .top_middle_bottom_r_t_left{
        width: 50%;
        height: 100%;
        position: absolute;
        left: 0;
        overflow: hidden;
    }
    .top_middle_bottom_r_t_left_body{
        width: 100%;
        height: 100%;
        position: relative;
     }
    .top_middle_bottom_r_t_right{
        width: 50%;
        height: 100%;
        position: absolute;
        right: 0;
    }
    .top_middle_bottom_r_t_right_body{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .top_middle_bottom_r_bottom{
        width: 100%;
        height: 70%;
        position: relative;
    }
    .top_middle_bottom_r_bottom_body{
        width: 80%;
        height: 90%;
        position: absolute;
        left: 2%;
        top: 5%;
    }
    .top_bottom{
        width: 100%;
        height: 60%;
    }
    .top_bottom_body{
        width: 100%;
        height: 94%;
        position: relative;
        /*background-color: blue;*/
    }
    .top_bottom_left{
        width: 50%;
        height: 100%;
        position: absolute;
        left: 0;
    }
    .top_bottom_left_body{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .top_bottom_l_left{
        width: 55%;
        height: 100%;
        position: absolute;
        left: 0;
    }
    .top_bottom_l_left_body{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .top_bottom_l_left_list{
        width: 100%;
        height: 100%;
        position: absolute;
        text-align: right;
        right: 5%;
    }
    .top_bottom_l_left_list li{
        width: 100%;
        height: 7%;
    }
    .top_bottom_l_right{
        width: 45%;
        height: 100%;
        position: absolute;
        right: 0;
    }
    .top_bottom_l_right_body{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .top_bottom_l_right_list{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        text-align: left;
    }
    .top_bottom_l_right_list li{
        width: 100%;
        height: 7%;
    }
    .top_bottom_right{
        width: 50%;
        height: 100%;
        position: absolute;
        right: 0;
    }
    .top_bottom_right_body{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .top_bottom_right_left{
        width: 40%;
        height: 100%;
        position: absolute;
        left: 0;
    }
    .top_bottom_right_left_body{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .top_bottom_right_left_list{
        width: 100%;
        height: 100%;
        position: absolute;
        right: 2%;
        text-align: right;
    }
    .top_bottom_right_left_list li{
        width: 100%;
        height: 8%;
    }
    .top_bottom_right_right{
        width: 60%;
        height: 100%;
        position: absolute;
        right: 0;
    }
    .top_bottom_right_right_body{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .top_bottom_right_right_list{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 2%;
        text-align: left;
    }
    .top_bottom_right_right_list li{
        width: 100%;
        height: 8%;
    }

</style>